<template>
  <div class="top_nav_list">
    <div class="top_nav_item" v-for="(item) in twoThreeList" :key="item.categoryId">
      <div class="list_two">
        <span>
          {{item.categoryName}}
        </span>
      </div>
      <div class="list_threes">
        <a href="JavaScript:;" v-for="(itemThree) in item.categoryVOList" :key="itemThree.categoryId"> {{itemThree.categoryName}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['twoThreeList'],
  data() {
    return {
      list: []
    }
  },
  computed: {
    // list_two() {
    //   let listTwo = []
    //   for (let i = 0; i < this.twoThreeList.length; i++) {
    //     listTwo.push(this.twoThreeList[i].categoryName)
    //   }
    //   return listTwo
    // }
    // list_three(){
    //   let listThree = []
    //   for (let i = 0; i < this.list_two.length; i++) {
    //   }
    // }
  },
  mounted() {
    // console.log(this.twoThreeList)
  }
}
</script>

<style lang="less" scoped>
.top_nav_list {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  // 二三级容器
  .top_nav_item {
    color: @nav_list_color;
    width: 85%;
    margin: 0 auto;

    // 二级
    .list_two {
      margin: 10px 0px;

      span {
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    // 三级
    .list_threes {
      display: flex;
      flex-wrap: wrap;
      a {
        color: @nav_list_color;
        display: block;
        text-decoration: none;
        margin-right: 10px;
        margin-top: 5px;
      }
      a:hover {
        font-weight: bold;
      }
    }
  }
}
</style>